<template>
    <QilinForm :formConfig.sync="formConfig" ref="formConfigRef">
        <template v-slot:projectIntroduce="slotData">
            <el-form-item :label="slotData.data.item.labelName" :prop="slotData.data.item.dataName"
                :style="slotData.data.item.style"
            >
                <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                    placeholder="请输入项目介绍！！"
                ></el-input>
            </el-form-item>
        </template>
        <template v-slot:evaluation="slotData">
            <el-input v-model="formConfig.submitData[slotData.data.item.dataName]"
                placeholder="请输入个人评价~~~"
            ></el-input>
        </template>
        <template v-slot:extraFormItem>
            <el-form-item label="年收入" prop="salary" style="width:50%">
                <el-input v-model="formConfig.submitData.salary" placeholder="分逼不挣"></el-input>
            </el-form-item>
        </template>
        <template v-slot:extraItem>
            <div>这是独立于form表单之外的元素，常用于一些项目的额外奇葩的需求实现！</div>
        </template>
    </QilinForm>
</template>

<script>
export default {
    data(){
        return {
            formConfig:{
                elFormConfig:{
                    labelWidth:"100px",
                    labelSuffix:"："
                },
                itemConfig:[
                    {
                        labelName:"简介",
                        dataName:"description",
                        type:"input",
                        inputType:"textarea",
                        rows:3,
                        width:24
                    },
                    {
                        labelName:"姓名",
                        dataName:"name",
                        type:"input",
                        inputType:"text",
                        width:6,
                        validate:[
                            {
                                required:true,
                                message:"请输入姓名",
                                trigger:"blur"
                            }
                        ]
                    },
                    {
                        labelName:"银行卡密码",
                        dataName:"bankPassword",
                        type:"input",
                        inputType:"password",
                        width:6
                    },
                    {
                        labelName:"身份证号码",
                        dataName:"idCard",
                        type:"input",
                        inputType:"number",
                        width:6,
                        otherValidate:"idCardValidator"
                    },
                    {
                        labelName:"手机号码",
                        dataName:"phonenumber",
                        type:"input",
                        inputType:"text",
                        width:6,
                        otherValidate:"phoneValidator"
                    },
                    {
                        labelName:"出生日期",
                        dataName:"birthday",
                        type:"date",
                        dateType:"date",
                        width:6
                    },
                    {
                        labelName:"年龄",
                        dataName:"age",
                        type:"number",
                        width:6
                    },
                    {
                        labelName:"性别",
                        dataName:"gender",
                        type:"select",
                        dataListName:"genderList",
                        width:6
                    },
                    {
                        labelName:"参与项目",
                        dataName:"projectName",
                        type:"cascader",
                        dataListName:"projectNameList",
                        cascaderProps:{
                            label:"name",
                            value:"id",
                            children:"children"
                        },
                        width:6
                    },
                    {
                        labelName:"项目介绍",
                        dataName:"projectIntroduce",
                        type:"itemSlot",
                        slotName:"projectIntroduce",
                        style:"width:100%;"
                    },
                    {
                        labelName:"身份",
                        dataName:"identify",
                        type:"radio",
                        dataListName:"identifyList",
                        width:6
                    },
                    {
                        labelName:"开关",
                        dataName:"switch",
                        type:"switch",
                        activeText:"开启",
                        inactiveText:"关闭",
                        activeValue:0,
                        inactiveValue:1,
                        width:6
                    },
                    {
                        labelName:"爱好",
                        dataName:"hobby",
                        type:"checkbox",
                        dataListName:"hobbyList",
                        width:12
                    },
                    {
                        labelName:"上传附件",
                        dataName:"file",
                        type:"upload",
                        fileList:[],
                        limit:1,
                        uploadText:"不上传服务器方式",
                        width:12,
                        previewFn:(item)=>{
                            console.log(item);
                        }
                    },
                    {
                        labelName:"上传附件",
                        dataName:"file1",
                        type:"upload",
                        action:"http://47.122.16.23:8081/common/upload",
                        headers:{
                            Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InF0alRMQ0tjS1lSbkl6S2VtR2VXbkFXc1loVm44WThzIiwidXNlcklkIjoyNDJ9.cj3Wd6Vugx2MdT6jJHCC-m3npJuYtF8dvBkwsIg6Z38"
                        },
                        autoUpload:true,
                        fileList:[],
                        limit:1,
                        uploadText:"上传服务器方式",
                        width:12,
                        previewFn:(item)=>{
                            console.log(item);
                        }
                    },
                    {
                        labelName:"上传图片",
                        dataName:"image",
                        type:"image",
                        fileList:[],
                        limit:1,
                        fileTypeText:"不上传服务器方式",
                        customFn:(item,file)=>{ //自定义方法，仅针对于无指定action时上传
                            console.log(this.formConfig.submitData.image);
                        },
                        width:12
                    },
                    {
                        labelName:"上传图片",
                        dataName:"image1",
                        type:"image",
                        action:"http://47.122.16.23:8081/common/upload",
                        headers:{
                            Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InF0alRMQ0tjS1lSbkl6S2VtR2VXbkFXc1loVm44WThzIiwidXNlcklkIjoyNDJ9.cj3Wd6Vugx2MdT6jJHCC-m3npJuYtF8dvBkwsIg6Z38"
                        },
                        autoUpload:true,
                        fileList:[],
                        limit:1,
                        fileTypeText:"上传服务器方式",
                        width:12
                    },
                    {
                        labelName:"个人评价",
                        dataName:"evaluation",
                        type:"slot",
                        slotName:"evaluation",
                        width:12
                    }
                ],
                selectLists:{
                    genderList:[
                        {
                            label:"男",
                            value:0
                        },
                        {
                            label:"女",
                            value:1
                        },
                        {
                            label:"人妖",
                            value:2
                        }
                    ],
                    projectNameList:[
                        {
                            name:"南京冠霆智能科技有限公司",
                            id:1,
                            children:[
                                {
                                    name:"看守所项目",
                                    id:11
                                },
                                {
                                    name:"拘留所项目",
                                    id:12
                                },
                                {
                                    name:"戒毒所项目",
                                    id:13
                                },
                                {
                                    name:"安康医院项目",
                                    id:14
                                }
                            ]
                        },
                        {
                            name:"亚信安全有限公司",
                            id:2,
                            children:[
                                {
                                    name:"亚信智网有限公司",
                                    id:21,
                                    children:[
                                        {
                                            name:"SDP零信任项目",
                                            id:211
                                        },
                                        {
                                            name:"动态应用安全防护系统BSG",
                                            id:212
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name:"苏软科技（南京）有限公司",
                            id:3,
                            children:[
                                {
                                    name:"云上贵州项目",
                                    id:31
                                },
                                {
                                    name:"红花街道h5项目",
                                    id:32
                                },
                                {
                                    name:"温州市党政机关信息化项目",
                                    id:33
                                }
                            ]
                        },
                        {
                            name:"南京联创智慧城市科技有限公司",
                            id:4,
                            children:[
                                {
                                    name:"U创办公管理系统",
                                    id:41
                                },
                                {
                                    name:"U创办公小程序",
                                    id:42
                                }
                            ]
                        }
                    ],
                    identifyList:[
                        {
                            label:"学生"
                        },
                        {
                            label:"程序员"
                        }
                    ],
                    hobbyList:[
                        {
                            label:"唱"
                        },
                        {
                            label:"跳"
                        },
                        {
                            label:"rap"
                        },
                        {
                            label:"篮球"
                        }
                    ]
                },
                buttonConfig:[
                    {
                        btnName:"提交",
                        btnType:"primary",
                        btnSize:"small",
                        formRefName:()=>{
                            return this.$refs["formConfigRef"];
                        },
                        btnClick:(formRef)=>{
                            console.log(formRef,this.formConfig.submitData);
                        }
                    }
                ],
                submitData:{
                    name:"",
                    description:"",
                    bankPassword:"",
                    idCard:"",
                    phonenumber:"",
                    birthday:"",
                    age:0,
                    gender:0,
                    projectName:"",
                    projectIntroduce:"",
                    identify:"程序员",
                    switch:0,
                    hobby:["唱","跳"],
                    file:[],
                    file1:[],
                    image:[],
                    image1:[],
                    evaluation:"",
                    salary:""
                }
            }
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>

</style>
